<template>
    <view>
        <view class="m-swiper" v-if="list.length">
            <swiper
				class="swiper"
                :indicator-dots="dots"
                indicator-color="rgba(255, 255, 255, .3)"
                indicator-active-color="rgba(255, 255, 255, .8)"
                :autoplay="true"
            >
                <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index" @click="bindBannerTap(index)">
                    <image mode="aspectFill" :src="item[showField]"></image>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
export default {
    name: "m-banner1",
    props: {
        list: Array,
        showField: {
            type: String,
            default: 'image'
        },
		dots: {
			type: Boolean,
			default: false
		}
    },
    methods: {
        bindBannerTap(index) {
            this.$emit('tapBanner', index);
        }
    }
}
</script>

<style lang="scss">
.m-swiper{
    width: 100%;
    height: 280rpx;
    border-radius: 18rpx;
    overflow: hidden;
    .swiper{
        width: 100%;
        height: 100%;
        .swiper-item{
            width: 100%;
            height: 100%;
            border-radius: 18rpx;
            overflow: hidden;
        }
    }
}
</style>